/**
 * 选择用户
 * 
 */

import { FolderOpenOutlined, HomeOutlined, UserOutlined, UserSwitchOutlined } from "@ant-design/icons";
import { Breadcrumb, Button, Drawer, Input, List } from "@/components/base";
import React from "react";
import useDepartments from "./hooks/useDepartments";
import styles from './index.module.less';
import { useVisible } from "@/tools/hooks";

interface IUserInfo {
    [key: string]: any;
}

export interface ISelectUserProps {

    /** 用户数据改变 */
    onChange?: (value?: IUserInfo) => void;

    /** 用户数据 */
    value?: IUserInfo;
}

export default function SelectUser(props: ISelectUserProps) {

    const { open: visible, onClose, onOpen } = useVisible();

    const { setStart, departmentsList, userList, parent, setParent, go, loading } = useDepartments();

    const [value, setValue] = React.useState<IUserInfo>();

    const onClickUser = React.useCallback((user: IUserInfo) => {
        setValue(user);
        props.onChange?.(user);
        onClose()
    }, [onClose, props])

    React.useEffect(() => {
        setValue(props.value)
    }, [props.value])

    React.useEffect(() => {
        setParent([])
        setStart(visible);
    }, [setParent, setStart, visible]);

    return (
        <>
            <Input readOnly placeholder="点击选择用户" onClick={onOpen} value={value?.name} suffix={<UserSwitchOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />} />
            <Drawer title="选择用户" bodyStyle={{ display: 'flex', flexDirection: 'column' }} placement="right" onClose={onClose} visible={visible} destroyOnClose>
                <Breadcrumb className={styles.dreadcrumb} separator=">" >
                    <Breadcrumb.Item onClick={() => { setParent([]) }}>
                        <HomeOutlined />
                    </Breadcrumb.Item>
                    {
                        parent.map(e => {
                            return (
                                <Breadcrumb.Item onClick={() => { go(e) }} >
                                    {e.name}
                                </Breadcrumb.Item>
                            )
                        })
                    }
                </Breadcrumb>

                <List
                    bordered
                    loading={loading.length > 0}
                    dataSource={[...departmentsList, ...userList] as any[]}
                    renderItem={item => {
                        if (item.userid) {
                            const user = item as IUserInfo;
                            return (
                                <List.Item onClick={() => { onClickUser(user) }}>
                                    <Button icon={<UserOutlined />} type="link" style={{ padding: 0 }} >{user.name}</Button>
                                </List.Item>
                            )
                        } else {
                            const dep = item;
                            return (
                                <List.Item onClick={() => { go(dep) }}>
                                    <Button icon={<FolderOpenOutlined />} type="link" style={{ padding: 0 }} >{dep.name}</Button>
                                </List.Item>
                            )
                        }
                    }}
                />
                <Button style={{ marginTop: 10 }} block onClick={() => {
                    setValue(undefined);
                    props.onChange?.(undefined);
                    onClose()
                }} >清楚</Button>
            </Drawer>
        </>
    )
}